<template>
  <div>
    <a-range-picker
      style="width: 100%; margin-top: 4px"
      :show-time="{ format: 'HH:mm' }"
      format="YYYY-MM-DD HH:mm"
      size="large"
      :placeholder="['选择开始时间', '选择结束时间']"
      :value="hackValue || value"
      :disabled-date="disabledDate"
      @change="onChange"
      @calendarChange="onCalendarChange"
    />
    <a-button @click="cessss">ok</a-button>
  </div>
</template>

<script lang="ts" setup>
import { ref } from "vue";
import { Dayjs } from "dayjs";
type RangeValue = [Dayjs, Dayjs];
const dates = ref<RangeValue>();
const value = ref<RangeValue>();
const hackValue = ref<RangeValue>();
const cessss = () => {
  console.log(hackValue.value);
  console.log(value.value);
};

const disabledDate = (current: Dayjs) => {
  if (!dates.value || (dates.value as any).length === 0) {
    return false;
  }
  const tooLate = dates.value[0] && current.diff(dates.value[0], "days") > 1;
  const tooEarly = dates.value[1] && dates.value[1].diff(current, "days") > 1;
  return tooEarly || tooLate;
};

const onChange = (val: RangeValue) => {
  value.value = val;
};

const onCalendarChange = (val: RangeValue) => {
  dates.value = val;
};
</script>
<style scoped lang="less"></style>
